<template>
  <el-dialog
    title="添加分类"
    width="70%"
    :append-to-body="true"
    :visible.sync="showTag"
  >
    <el-row>
      <el-col :span="6">
        <div class="fs16 mb10">选择父节点</div>
        <el-tree
          v-if="showTag"
          ref="tree"
          lazy
          check-strictly
          show-checkbox
          :load="load"
          :default-checked-keys="[form.fid]"
          node-key="id"
          :props="{ label: 'name', children: 'children', isLeaf: 'isLeaf' }"
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <el-form :model="form" label-width="80px" size="mini">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="SEO_TITLE">
            <el-input v-model="form.seo_title"></el-input>
          </el-form-item>
          <el-form-item label="URL">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="排序">
                <el-input v-model="form.sort"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标识">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="摘要">
            <el-input v-model="form.abstract" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="定义class">
            <el-input v-model="form.class_name"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="20">
              <el-form-item label="定义style">
                <el-input
                  v-model="form.style"
                  disabled
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="pl5">
              <el-button
                type="primary"
                size="mini"
                @click="() => $refs.json.show(form.style)"
              >
                编辑
              </el-button>
            </el-col>
          </el-row>
          <el-form-item label="图片">
            <el-upload
              :action="uploadUrl"
              :file-list="fileList"
              list-type="picture"
              :on-success="onSuccess"
              :limit="1"
            >
              <el-button type="primary">上传图片</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button size="mini" @click="hide">
        取消
      </el-button>
      <el-button type="primary" :loading="appLoading" size="mini" @click="sub">
        确定
      </el-button>
    </div>
    <simple-json-dialog
      ref="json"
      @ok="res => $set(form, 'style', JSON.stringify(res))"
    ></simple-json-dialog>
  </el-dialog>
</template>

<script>
import { CONFIG_TYPE } from "../../lib/config";
import { AppLoadingMixin } from "../../lib/mixins/app-loading";
import { FIELDS } from "../../lib/tables/cate";
import { UploadMixin } from "../../lib/mixins/upload";
import { getFileObjectByUrl } from "../../lib/utils";
import SimpleJsonDialog from "../simple-json-dialog";

export default {
  name: "NewsCateAddDialog",
  components: { SimpleJsonDialog },
  mixins: [AppLoadingMixin, UploadMixin],
  props: {
    module: {
      type: String,
      default: "news"
    }
  },
  data() {
    return {
      form: {},
      fileList: [],
      data: [
        {
          name: "顶级",
          id: 0
        }
      ],
      info: {},
      types: CONFIG_TYPE,
      showTag: false
    };
  },
  methods: {
    show(data) {
      this.info = data;
      this.setForm();
      this.showTag = true;
    },
    hide() {
      this.resetForm();
      this.showTag = false;
    },
    setForm() {
      const { info = {} } = this;
      FIELDS.forEach(r => {
        info && info[r] && this.$set(this.form, r, info[r]);
      });
      const { thumb } = info;
      if (thumb) {
        this.fileList.push(getFileObjectByUrl(thumb));
      }
    },
    resetForm() {
      this.fileList.splice(0);
      FIELDS.forEach(r => {
        this.$set(this.form, r, null);
      });
    },
    async load(node, resolve) {
      let list = [];
      if (node.level === 0) {
        list = [{ name: "顶级", fid: 0, isLeaf: true }];
      }
      const data = await this.$cateService.list({
        module: this.module,
        fid: (node.data && node.data.id) || 0,
        pageSize: 10000
      });
      list = list.concat(data.data);
      resolve(list);
    },
    onSuccess(response) {
      if (response.errno === 0) this.form.thumb = response.data.url;
    },
    async sub() {
      const form = { ...this.form };
      const fids = this.$refs.tree.getCheckedKeys();
      if (fids.length === 0) return this.$message.error("请选择父节点");
      if (fids.length > 1) return this.$message.error("只能选择一个父节点");

      form.fid = fids[0];
      form.module = this.module;
      if (form.id) {
        if (await this.$cateService.update(form)) {
          this.hide();
          this.$message.success("修改成功");
          this.$emit("ok");
        }
        return;
      }

      if (await this.$cateService.add(form)) {
        this.hide();
        this.$message.success("添加成功");
        this.$emit("ok");
      }
    }
  }
};
</script>

<style scoped></style>
